<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情页</title>
    <meta name="description" content="购物商城，网上购物">
    <meta name="keywords" content="网上购物，手机，电脑，服饰">
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/detail.css">
    <!-- 引入js文件 -->
    <script src="./js/detail.js"></script>
</head>

<body>
    <!-- 顶部导航栏 start -->
    <div class="top-nav">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp;</li>
                    <li><a href="./login.htm">请登录&nbsp;</a></li>
                    <li><a href="./register .html" class="color-red">免费注册</a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="">我的订单</a></li>
                    <li></li>
                    <li><a href="">我的品优购</a><i class="icon-down"></i></li>
                    <li></li>
                    <li><a href="">品优购会员</a></li>
                    <li></li>
                    <li><a href="">企业采购</a></li>
                    <li></li>
                    <li><a href="">关注品优购</a><i class="icon-down"></i></li>
                    <li></li>
                    <li><a href="">客户服务</a><i class="icon-down"></i></li>
                    <li></li>
                    <li><a href="">网站导航</a><i class="icon-down"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部导航栏 end -->
    <!-- 头部 start -->
    <div class="header w">
        <div class="logo">
            <a href="./index.html" title="品优购"></a>
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- 购物车 -->
        <div class="shopbar">
            <i></i><a href="">我的购物车</a><em></em>
            <i class="eight">8</i>
        </div>
        <!-- 热词 -->
        <div class="hotwords">
            <ul>
                <li><a href="">优惠购首发</a></li>
                <li><a href="">亿元优惠</a></li>
                <li><a href="">9.9元团购</a></li>
                <li><a href="">美满99减30</a></li>
                <li><a href="">办公用品</a></li>
                <li><a href="">电脑</a></li>
                <li><a href="">通信</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 end -->

    <div class="red-line">

    </div>
    <!-- 导航栏 start -->
    <div class="nav">
        <div class="w">
            <div class="left-nav">
                <div class="category-type">
                    全部商品分类
                </div>
            </div>
            <div class="main-nav">
                <ul>
                    <li><a href="">服装城</a></li>
                    <li><a href="">美妆馆</a></li>
                    <li><a href="">传智超市</a></li>
                    <li><a href="">全球购</a></li>
                    <li><a href="">闪购</a></li>
                    <li><a href="">团购</a></li>
                    <li><a href="">拍卖</a></li>
                    <li><a href="">有趣</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航栏 end -->
    <!-- 手机详情 start -->
    <div class="dt-container w clearfix">
        <!-- 面包屑导航 -->
        <div class="phone-nav">
            <ul>
                <li><a href="">手机、数码、通讯</a></li>
                <li>〉</li>
                <li><a href="">手机</a></li>
                <li>〉</li>
                <li><a href="">Apple苹果</a></li>
                <li>〉</li>
                <li><a href=""> iphone 6S Plus系类 </a></li>
            </ul>
        </div>
        <!-- 手机大概介绍 start-->
        <div class="intruduce clearfix">
            <!-- 左边详细介绍 -->
            <div class="fl preview">
                <div class="big-preview">
                    <img src="./upload/b3.jpg" alt="">
                    <div class="mask"></div>
                    <div class="big">
                        <img src="./upload/big.jpg" alt="" class="bigImg">
                    </div>
                </div>
                <div class="small-preview">
                    <a href=""><img src="./upload/左箭头.png" alt=""></a>
                    <a href="" class="default"><img src="./upload/详情页缩略图1.png" alt=""></a>
                    <a href=""><img src="./upload/详情页缩略图2.png" alt=""></a>
                    <a href=""><img src="./upload/右箭头.png" alt=""></a>
                </div>
                <div class="number">
                    <span>商品编号：0468256644</span>
                    <div><img src="./img/分享.png" alt=""><a href="">分享</a></div>
                    <div><img src="./img/关注.png" alt=""><a href="">关注 5000</a></div>
                    <div><i class="box"></i><span>对比</span></div>
                </div>
            </div>
            <!-- 右边详细介绍 start-->
         
            <div class="detail fr">
                <div class="title">
                    <h3 style="margin: 10px 0;">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
                    <p class="color-red">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
                </div>
                <div class="price">
                    <div class="price-icon">
                        <div class="title fl">
                            <i>价 格</i>
                        </div>
                        <div class="content fl">
                            <span>￥5299.00</span>
                            <em class="color-red">降价通知</em>
                        </div>
                        <div class="remark fr">累计评价612188</div>
                    </div><br>
                    <div class="price-icon">
                        <div class="title fl">
                            <i>促 销</i>
                        </div>
                        <div class="plus-pr fl">
                            <span>加购价</span>
                            满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，<br>
                            即可在购物车换
                            购热销商品 <a href="">详情</a> 》
                        </div>
                    </div>
                </div>
                <!-- 支持 start -->
                <div class="support">
                    <div class="support-wrap">
                        <div class="fl title"><i>支　　持</i></div>
                        <div class="fl fix-width"><em class="sup-bd">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em></div>
                    </div>
                    <div class="support-wrap">
                        <div class="fl title"><i>配 送 至</i></div>
                        <div class="fl"><em class="sup-bd">北京海淀区中关<i class="iconfont"></i>有货 支持 99元免运费 |货到付款
                                |211限时达 </em></div><br>
                        <div class="fl express"><em
                                class="sup-bd">由自营发货，并提供售后服务。11:00前完成下单，预计<strong>今天（08月10日）送达</strong></em></div>
                    </div>
                  
                </div>
                <!-- 支持 end -->
                <!-- 选择模块 start -->
                <div class="choose">
                    <ul class="color">选择颜色
                        <li>金色</li>
                        <li>银色</li>
                        <li>黑色</li>
                        <li>玫瑰金</li>
                    </ul>
                    <ul class="edition">选择版本
                        <li>公开版</li>
                        <li>移动4G</li>
                    </ul>
                    <ul class="capacity">内存容量
                        <li>16GB</li>
                        <li>64GB</li>
                        <li>128B</li>
                    </ul>
                    <ul class="ways">购买方式
                        <li>官方标配</li>
                        <li>移动优惠购</li>
                        <li>电信优惠购</li>
                    </ul>
                    <ul class="suit">套 &nbsp; 装
                        <li>保护套装</li>
                        <li>充电套装</li>
                    </ul>
                    <!-- 数量控件 -->
                    <div class="sup-wrap">
                        <div class="controls">
                            <input type="text" value="1" class="text">
                            <a href="" class="increment plus">+</a>
                            <a href="" class="increment mins">-</a>
                        </div>
                        <a href="" class="addshopcar">加入购物车</a>
                    </div>
                </div>
                <!-- 选择模块 end -->
            </div>
            <!-- 右边详细介绍 end -->
        </div>
        <!-- 手机大概介绍 end -->
        <!-- 产品详细 start -->
        <div class="product-dt">
            <!-- 相关分类 -->
            <div class="mod_about fl">

                <div class="about-hd">
                    <div class="ab-type"><a href="" class="color-red">相关分类</a></div>
                    <div class="recom"><a href="">推荐品牌</a></div>
                </div>
                <div class="about-bd">
                    <ul class="text-list">
                        <li><a href="">手机</a><a href="">手机壳</a></li>
                        <li><a href="">内存卡</a><a href="">iphone配件</a></li>
                        <li><a href="">贴膜</a><a href="">手机耳机</a></li>
                        <li><a href="">移动电源</a><a href="">平板电脑</a></li>
                        <li><a href="">笔记本</a><a href="">蓝牙耳机</a></li>
                    </ul>
                    <ul class="pic-list">
                        <h3>购买了此商品的用户还买了</h3>
                        <li>
                            <div class="list-img"><img src="./upload/详情页相关分类1.png" alt=""></div>
                            <div class="add"><a href="">加入购物车</a></div>
                        </li>
                        <li>
                            <div class="list-img"><img src="./upload/详情页分类2.png" alt=""></div>
                            <div class="add"><a href="">加入购物车</a></div>
                        </li>
                        <li>
                            <div class="list-img"><img src="./upload/详情页分类3.png" alt=""></div>
                            <div class="add"><a href="">加入购物车</a></div>
                        </li>
                        <li>
                            <div class="list-img"><img src="./upload/详情页分类2.png" alt=""></div>
                            <div class="add"><a href="">加入购物车</a></div>
                        </li>
                        <li>
                            <div class="list-img"><img src="./upload/详情页分类3.png" alt=""></div>
                            <div class="add"><a href="">加入购物车</a></div>
                        </li>
                        <li>
                            <div class="list-img"><img src="./upload/详情页相关分类1.png" alt=""></div>
                            <div class="add"><a href="">加入购物车</a></div>
                        </li>

                    </ul>
                </div>
            </div>
            <!-- 产品参数 -->
            <div class="mod_info fr">
                <div class="collocation">
                    <div class="info-hd">
                        <div>选择搭配</div>
                    </div>
                    <div class="coll-bd">
                        <div class="coll-list">
                            <ul>
                                <li>精品</li>
                                <li>iphone配件</li>
                                <li>蓝牙耳机</li>
                                <li>自拍杆</li>
                                <li>数据线</li>
                                <li>其他手机配件</li>
                                <li>U盘</li>
                            </ul>
                        </div>
                        <div class="coll-img">
                            <ul>
                                <li><img src="./upload/coll1.png" alt=""><br>
                                    <span class="price">￥5299.00</span>
                                </li>
                                <li>+</li>
                                <li><img src="./upload/coll2.png" alt=""><br>
                                    <span class="price">￥39</span>
                                </li>
                                <li><img src="./upload/coll3.png" alt=""><br>
                                    <span class="price">￥76</span>
                                </li>
                                <li><img src="./upload/coll4.png" alt=""><br>
                                    <span class="price">￥76</span>
                                </li>
                                <li><img src="./upload/coll5.png" alt=""><br>
                                    <span class="price">￥76</span>
                                </li>
                                <li class="arrow"><img src="./upload/选择搭配箭头.png" alt=""></li>
                                <li class="selected">
                                    <img src="./upload/已选搭配.png" alt="">
                                    <div>加入购物车</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="parameter">
                 
                    <div class="info-hd">
                        <ul>
                            <li>商品介绍</li>
                            <li>规格与包装</li>
                            <li>售后保障</li>
                            <li>商品评价（50000）</li>
                            <li>手机社区</li>
                        </ul>
                    </div>
                    <div class="para-bd">
                        <ul>
                            <li>分辨率：1920*1080(FHD)</li>
                            <li>后置摄像头：1200万像素</li>
                            <li>前置摄像头：500万像素</li>
                            <li>核&nbsp;&nbsp;数：其他</li>
                            <li>频&nbsp;&nbsp;率：以官网信息为准</li>
                            <li>品牌： Apple</li>
                            <li>商品名称：APPLEiPhone 6s Plus</li>
                            <li>商品编号：1861098</li>
                            <li>商品毛重：0.51kg</li>
                            <li>商品产地：中国大陆</li>
                            <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                            <li>系统：苹果（IOS）</li>
                            <li>像素：1000-1600万</li>
                            <li>机身内存：64GB</li>
                        </ul>
                    </div>
                </div>
                <div class="bigphone1">

                </div>
                <div class="bigphone2"></div>
            </div>
        </div>
        <!-- 产品详细 end -->


    </div>
    <!-- 手机详情 end -->
    <!-- 猜你喜欢 -->
    <div class="mod_love w">
        <div class="love-hd">
            <h2>猜你喜欢</h2>
        </div>
        <div class="love-bd">
            <ul>
                <li><a href=""><img src="./upload/xq喜欢1.png" alt=""></a></li>
                <li><a href=""><img src="./upload/xq喜欢2.png" alt=""></a></li>
                <li><a href=""><img src="./upload/xq喜欢3.png" alt=""></a></li>
                <li><a href=""><img src="./upload/xq喜欢4.png" alt=""></a></li>
                <li><a href=""><img src="./upload/xq喜欢5.png" alt=""></a></li>
                <li><a href=""><img src="./upload/xq喜欢6.png" alt=""></a></li>
            </ul>
        </div>
    </div>
     <!-- 底部 start -->
     <div class="footer">
        <div class="w">
            <!-- 保证模块 -->
            <div class="ensure">
                <ul>
                    <li>
                        <div class="pic item1"></div>
                        <div class="txt">
                            <h3>正品保障</h3>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="pic item2"></div>
                        <div class="txt">
                            <h3>极速物流</h3>
                            <p>急速物流，急速送达</p>
                        </div>
                    </li>
                    <li>
                        <div class="pic item3"></div>
                        <div class="txt">
                            <h3>无忧售后</h3>
                            <p>7天无理由退换货</p>
                        </div>
                    </li>
                    <li>
                        <div class="pic item4"></div>
                        <div class="txt">
                            <h3>特色服务</h3>
                            <p>私人定制家电套餐</p>
                        </div>
                    </li>
                    <li>
                        <div class="pic item5"></div>
                        <div class="txt">
                            <h3>帮助中心</h3>
                            <p>您的购物指南</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 帮助菜单 -->
            <div class="help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="#">上门自提</a></dd>
                    <dd><a href="#">211限时达</a></dd>
                    <dd><a href="#">配送服务查询</a></dd>
                    <dd><a href="#">配送费收取标准</a></dd>
                    <dd><a href="#">海外配送</a></dd>
                    <dd><a href="#"></a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">货到付款</a></dd>
                    <dd><a href="#">在线支付</a></dd>
                    <dd><a href="#">分期付款</a></dd>
                    <dd><a href="#">邮局汇款</a></dd>
                    <dd><a href="#">公司转账</a></dd>

                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">价格保护</a></dd>
                    <dd><a href="#">退款说明</a></dd>
                    <dd><a href="#">返修/退换货</a></dd>
                    <dd><a href="#">取消订单</a></dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="#">夺宝岛</a></dd>
                    <dd><a href="#">DIY装机</a></dd>
                    <dd><a href="#">延保服务</a></dd>
                    <dd><a href="#">品优购E卡</a></dd>
                    <dd><a href="#">品优购通信</a></dd>

                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="./img/客户端二维码_03.png" alt=""><br>
                        品优购客户端
                    </dd>
                </dl>
            </div>
            <!-- 版权声明 -->
            <div class="copyright">
                <div class="w">
                    <div class="aboutme">
                        <a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">联系客服</a> | <a href="">商家入驻</a> | <a
                            href="">商家入驻</a> | <a href="">手机品优购</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> | <a
                            href="">品优购社区</a> |
                        <a href="">品优购公益</a> | <a href="">English Site</a> | <a href="">Contact U</a>
                    </div>
                    <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
                    <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>

        </div>
    </div>
    <!-- 底部 end -->
</body>

</html>